{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
     /* 基本样式 */
body {
  font-family: Arial, sans-serif;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

table th:nth-of-type(2), table td:nth-of-type(2) {
  width: 10%;
}

@media print {
  /* 设置较小的页面边距 */
  @page {
    margin: 0.5cm;
  }

  /* 保持内容的显示，不隐藏header, footer, nav, form */
  header, footer, nav, form {
    display: block;
  }

  /* 调整表格和单元格的字体大小 */
  table, th, td {
    font-size: smaller; /* 减小字体大小 */
  }

  /* 如果需要，可以取消分页规则 */
  /* table {
    page-break-inside: avoid;
  } */

  /* 其他打印样式规则 */
  /* 隐藏不需要打印的部分 */
  header, footer, nav, form {
    display: none;
  }
}
    </style>
    <title>打印数据</title>
  </head>

  <body>
    <!-- 导航 -->
    <header>
      <nav>
        <button id="printButton">点击我打印</button>
        <button id="backButton" style="display: none;">返回首页</button>
      </nav>
      
      <form method="post" action="{% url 'filter_by_date' %}">
        {% csrf_token %}
        <span>检验日期:</span>
        <input type="date" id="date" name="date">
        <input type="submit" value="提交">
      </form>
      
      <form method="post" action="{% url 'filter_by_batch' %}">
        {% csrf_token %}
        <span>批号:</spam>
        <select name="批号">
            <option value="">请选择批号</option>
            {% for batch in distinct_batches %}
            <option value="{{ batch }}">{{ batch }}</option>
            {% endfor %}
        </select>
        <input type="submit" value="提交">
    </form>
    </header>
    <table>
      <thead>
        <tr>
          <th>检验单号</th>
          <th>检验日期</th>
          <th>存货编码</th>
          <th>存货名称</th>
          <th>规格型号</th>
          <th>品牌</th>
          <th>供应商编码</th>
          <th>供应商名称</th>
          <th>批号</th>
          <th>生产日期</th>
          <th>合格数量</th>
          <th>不良数量</th>
        </tr>
      </thead>
      <tbody>
        {% for data in datas %}
        <tr>
          <td><input type="checkbox" name="selected_rows" value="{{ data.id }}" /></td>
          <td>{{data.检验单号}}</td>
          <td>{{data.检验日期}}</td>
          <td>{{data.存货编码}}</td>
          <td>{{data.存货名称}}</td>
          <td>{{data.规格型号}}</td>
          <td>{{data.品牌}}</td>
          <td>{{data.供应商编码}}</td>
          <td>{{data.供应商名称}}</td>
          <td>{{data.批号}}</td>
          <td>{{data.生产日期}}</td>
          <td>{{data.合格数量}}</td>
          <td>{{data.不良数量}}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    <button id="confirmButton">确认</button>
    <!-- 尾部 -->
    <footer>
  </footer>
<script>
  // 等待DOM加载完毕
  document.addEventListener('DOMContentLoaded', function() {
      // 获取打印按钮元素
      var printButton = document.getElementById('printButton');
      
      // 为打印按钮添加点击事件监听器
      printButton.addEventListener('click', function() {
          // 直接调用window.print()方法来触发打印对话框
          window.print();
      });

      // 获取返回按钮元素
      var backButton = document.getElementById('backButton');
      
      // 获取所有表单元素
      var forms = document.querySelectorAll('form');
      
      // 为每个表单添加提交事件监听器
      forms.forEach(function(form) {
          form.addEventListener('submit', function(event) {
              // 阻止表单默认提交行为
              event.preventDefault();
              
              // 隐藏所有表单
              forms.forEach(function(f) {
                  f.style.display = 'none';
              });
              
              // 显示返回按钮
              backButton.style.display = 'block';
          });
      });

      // 为返回按钮添加点击事件监听器
      backButton.addEventListener('click', function() {
          // 隐藏返回按钮
          backButton.style.display = 'none';
          
          // 显示所有表单
          forms.forEach(function(f) {
              f.style.display = 'block';
          });
          
          // 跳转到首页
          window.location.href = 'http://127.0.0.1:8000/';
      });
  });
</script>
  </body>
</html>
